<template>
	<div class="app-container app-height">
		<!-- 用户管理 -->
		<el-row>
			<!--用户数据-->
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="auto">
					<el-form-item label="名称关键词" prop="keyword">
						<el-input v-model="queryParams.userName" placeholder="输入真实姓名、用户关键词" clearable style="width: 320px;" @keyup.enter.native="handleQuery" />
					</el-form-item>

					<el-form-item label="所属组">
						<el-select v-model="queryParams.group" clearable multiple collapse-tags placeholder="请选择所属组" style="width: 240px">
							<el-option
								v-for="item in userGroupList"
								:key="item.groupId"
								:label="item.groupName"
								:value="item.groupId"
							>
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" size="mini" style="height:32px;" icon="el-icon-search" @click="handleQuery">查询</el-button>
						<el-button type="primary" size="mini" style="height:32px;" icon="el-icon-refresh" @click="resetQuery">刷新</el-button>
						<el-button type="primary" size="mini" style="height:32px;" icon="el-icon-plus" v-hasPermi="['system:user:add']" @click="handleAdd">新增</el-button>
					</el-form-item>
				</el-form>

				<el-table v-loading="loading" :data="userList" border>
					<el-table-column label="真实姓名" align="center" key="realName" prop="realName" show-overflow-tooltip />
					<el-table-column label="用户名称" align="center" key="userName" prop="userName" show-overflow-tooltip />
					<el-table-column label="邮箱" align="center" key="email" prop="email" show-overflow-tooltip />
					<el-table-column label="Token" align="center" key="token" prop="token" show-overflow-tooltip />
					<el-table-column label="角色" align="center" key="roles" prop="roles" show-overflow-tooltip>
						<template slot-scope="scope">
							<span v-for="(item,index) of scope.row.roles" :key="index"><template v-if="index!=0">、</template>{{item.roleName}}</span>
						</template>
					</el-table-column>
					<el-table-column label="分组" align="center" key="groups" prop="groups" show-overflow-tooltip>
						<template slot-scope="scope">
							<span v-for="(item,index) of scope.row.groups" :key="index"><template v-if="index!=0">、</template>{{item.groupName}}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态" align="center" key="status" prop="status">
						<template slot-scope="scope">
							<span v-if="scope.row.status==1" style="color:red;">冻结</span>
							<span v-else>启用</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" align="center" key="createTime" prop="createTime" width="160" />
					<el-table-column label="最后登录" align="center" key="lastLoginTime" prop="lastLoginTime" />
					<el-table-column label="登录次数" align="center" key="loginTimes" prop="loginTimes" />
					<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-popconfirm v-if="scope.row.status==0" title="确认冻结该用户吗？" v-hasPermi="['system:user:lock']" @confirm="handleStatus(scope.row)">
								<el-tooltip content="冻结" placement="bottom" effect="light" slot="reference">
									<div class="user-action action-disabled"></div>
								</el-tooltip>
							</el-popconfirm>
							<el-popconfirm v-else title="确认启用该用户吗？" v-hasPermi="['system:user:lock']" @confirm="handleStatus(scope.row)">
								<el-tooltip content="启用" placement="bottom" effect="light" slot="reference">
									<div class="user-action action-disabled"></div>
								</el-tooltip>
							</el-popconfirm>

							<el-tooltip content="修改密码" placement="bottom" effect="light" v-hasPermi="['system:user:resetPwd']">
								<div class="user-action action-pwd" @click="handleResetPwd(scope.row)"></div>
							</el-tooltip>
							<el-tooltip content="编辑" placement="bottom" effect="light" v-hasPermi="['system:user:edit']">
								<div class="user-action action-edit" @click="handleUpdate(scope.row)"></div>
							</el-tooltip>
							<!-- <el-tooltip content="删除" placement="bottom" effect="light" v-hasPermi="['system:user:remove']">
				<div class="user-action action-delete" @click="handleDelete(scope.row)"></div>
			</el-tooltip> -->
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
				<el-dialog title="密码修改" :visible.sync="dialogVisible" width="500px">
					<reset-pwd :record="pwdUserInfo" @pwdClose="pwdClose"></reset-pwd>
				</el-dialog>

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { listUser, delUser, addUser, updateUser, changeUserStatus } from "@/api/dataManagement/system/user";
	import { groupUserList } from "@/api/dataManagement/system/group";
	import resetPwd from './profile/resetPwd'

	export default {
		name: "User",
		components: { resetPwd },
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 总条数
				total: 0,
				// 用户表格数据
				userList: null,
				// 用户组选项
				userGroupList: [],
				// 表单参数
				form: {},
				defaultProps: {
					children: "children",
					label: "label"
				},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 30,
					userName: undefined,
					group: [],
					loadRelation: true
				},
				// 表单校验
				rules: {
					userName: [
						{ required: true, message: "用户名称不能为空", trigger: "blur" }
					],
					nickName: [
						{ required: true, message: "用户昵称不能为空", trigger: "blur" }
					],
					password: [
						{ required: true, message: "用户密码不能为空", trigger: "blur" }
					],
					email: [
						{
							type: "email",
							message: "'请输入正确的邮箱地址",
							trigger: ["blur", "change"]
						}
					],
					phonenumber: [
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					]
				},
				treeData: [],
				// tab切换
				activeName: 'first',
				dialogVisible: false,
				pwdUserInfo: {}
			};
		},
		beforeRouteEnter: (to, from, next) => {
			if (from.name == 'AddGroup' || from.name == 'EditGroup') {
				next(vm => {
					vm.activeName = 'second'
				})
			} else {
				next()
			}
		},
		created() {
			this.getUserGroup()
			this.getList();
		},
		activated() {
			this.getUserGroup()
			this.getList();
		},
		methods: {
			/** 查询用户组列表 */
			getUserGroup() {
				groupUserList().then(response => {
					this.userGroupList = response.data
				});
			},
			/** 查询用户列表 */
			getList() {
				if (this.loading) return

				this.loading = true;

				let params = this.addDateRange(Object.assign({}, this.queryParams, {
					group: this.queryParams.group.join(',') || undefined
				}))

				listUser(params).then(response => {
					this.userList = response.rows;
					this.total = response.total;
					this.loading = false;
				}).catch(() => {
					this.loading = false
				})
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.page = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams.userName = '';
				this.queryParams.group = []
				this.handleQuery();
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.$router.push('/manager/user/addUser')
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.$router.push({ path: '/manager/user/editUser', query: { id: row.userId } })
			},
			/** 重置密码按钮操作 */
			handleResetPwd(row) {
				this.pwdUserInfo = row
				this.dialogVisible = true
				// 	confirmButtonText: "确定",
				// 	cancelButtonText: "取消"
				// }).then(({ value }) => {
				// 	resetUserPwd(row.userId, value).then(response => {
				// 		this.msgSuccess("修改成功，新密码是：" + value);
				// 	});
				// }).catch(() => { });
			},
			/** 冻结按钮操作 */
			handleStatus(row) {
				console.log("row:", row)
				let params = {
					status: row.status == 1 ? 0 : 1,
					userId: row.userId
				}
				changeUserStatus(params).then((res) => {
					if (res.code == 200) {
						this.msgSuccess("修改成功");
						this.getList()
					}
				})
			},
			pwdClose() {
				this.dialogVisible = false
			},
			/** 提交按钮 */
			submitForm: function () {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.userId != undefined) {

							updateUser(this.form).then(response => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addUser(this.form).then(response => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const userIds = row.userId || this.ids;
				this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function () {
					return delUser(userIds);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				})
			},
			/** 切换tab */
			handleClick(tab, event) { }
		}
	};
</script>
<style lang="scss" scoped>
	@import "~@/assets/styles/system/common.scss";
	.app-container {
		padding: 20px
	}
	.auth {
		padding: 10px;
		border: 1px solid #dddddd;
		.auth-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 8px;
			.auth-th {
				border-right: 1px solid #000;
			}
		}
		.auth-th {
			display: inline-block;
			text-align: center;
			margin-right: 0px;
		}
		.t1 {
			flex: 1;
		}
		.t2 {
			width: 240px;
		}
		.t3 {
			width: 100px;
		}
	}
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
</style>
